<template>
  <div class="start-menu">
    <div class="start-menu-left">
      <div 
        class="start-menu-item" 
        v-for="item in items" 
        :key="item.name" 
        @click="$emit('select', item)"
      >
        <img :src="item.image" :alt="item.name" class="start-menu-icon">
        <span>{{ item.name }}</span>
      </div>
    </div>
    <div class="start-menu-right">
      <div class="user-profile">
        <img src="../../../assets/login/person.png" alt="用户" class="user-avatar">
        <span>Administrator</span>
      </div>
      <div class="power-options">
        <button @click="$emit('shutdown')">关机</button>
        <button @click="$emit('restart')">重启</button>
      </div>
    </div>
  </div>
</template>

<script setup>
defineProps({
  items: {
    type: Array,
    required: true
  }
})

defineEmits(['select', 'shutdown', 'restart'])
</script>

<style scoped lang="scss">
.start-menu {
  position: absolute;
  bottom: 40px;
  left: 0;
  width: 600px;
  height: 500px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 8px 8px 0 0;
  display: flex;
  z-index: 200;
  box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.3);
}

.start-menu-left {
  width: 60%;
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

.start-menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  color: white;
  cursor: pointer;
  border-radius: 5px;
  
  &:hover {
    background-color: rgba(255, 255, 255, 0.1);
  }
  
  .start-menu-icon {
    width: 32px;
    height: 32px;
    margin-bottom: 5px;
  }
  
  span {
    font-size: 12px;
    text-align: center;
  }
}

.start-menu-right {
  width: 40%;
  background-color: rgba(48, 48, 48, 0.8);
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.user-profile {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  color: white;
  
  .user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
  }
}

.power-options {
  margin-top: auto;
  display: flex;
  justify-content: space-around;
  
  button {
    background-color: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    
    &:hover {
      background-color: rgba(255, 255, 255, 0.2);
    }
  }
}
</style>